<template>
	<view class="flex-col page">
		<u-search placeholder="输入关键词搜索" :showAction="false" :clearabled="false" v-model="keyword" margin="0 0 0 0"
			height="80rpx" bgColor="#f7f8fc"></u-search>
		<view class="tag-list">
			<view class="tag-list-box">
				<span>综合</span>
				<u-icon name="arrow-down-fill" color="#c6c7c8" size="28"></u-icon>
			</view>
			<view class="tag-list-box">
				<span class="active">新品</span>
				<u-icon name="arrow-down-fill" color="#2979ff" size="28"></u-icon>
			</view>
			<view class="tag-list-box">
				<span>销量</span>
				<u-icon name="arrow-down-fill" color="#c6c7c8" size="28"></u-icon>
			</view>
			<view class="tag-list-box">
				<span>价格</span>
				<u-icon name="arrow-down-fill" color="#c6c7c8" size="28"></u-icon>
			</view>
		</view>

		<view class="flex-row goods-list">
			<view class="flex-col goods-list-box goods-list-item" v-for="(item, index) in 4" :key="index">
				<view class="flex-col items-start">
					<image class="image_15" src="../../static/wx/a172a475ce3bdf8b6dc1eda491107028.png" />
					<text class="font_9 text_22 text_23">加热鞋垫暖足贴加热鞋垫暖足贴加热鞋垫暖足贴</text>
					<text class="font_10 text_25">自发热暖宝宝</text>
				</view>
				<view class="mt-10 flex-row items-center group_10">
					<text class="font_5">￥19.5</text>
					<image class="shrink-0 image_18 image_19"
						src="../../static/wx/bc36df84586e9202a50f65912343e35a.png" />
					<image class="shrink-0 image_16 image_17"
						src="../../static/wx/8a22762f483b718a2770f34e14df6152.png" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {};
		},

		methods: {},
	};
</script>

<style scoped lang="css">
	/* @import "@/static/jd/base.scss"; */
	.ml-111 {
		margin-left: 222rpx;
	}

	.mt-29 {
		margin-top: 58rpx;
	}

	.mt-33 {
		margin-top: 66rpx;
	}

	.mt-23 {
		margin-top: 16rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-15 {
		margin-left: 30rpx;
	}

	.ml-13 {
		margin-left: 26rpx;
	}

	.ml-19 {
		margin-left: 38rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.page {
		padding: 20rpx;

		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.group {
		padding-left: 52rpx;
	}

	.image-wrapper {
		width: 64rpx;
	}

	.image_3 {
		width: 64rpx;
		height: 26rpx;
	}

	.image {
		width: 50rpx;
		height: 68rpx;
	}

	.image_2 {
		width: 48rpx;
		height: 52rpx;
	}

	.text-wrapper {
		padding: 12rpx 0;
		background-color: #ffffff;
		border-radius: 50%;
		width: 34rpx;
	}

	.pos {
		position: absolute;
		right: 0;
		top: 0;
	}

	.text {
		color: #f08000;
		font-size: 20rpx;
		font-family: Mukta;
		font-weight: 700;
		line-height: 12.6rpx;
	}

	.top-box {
		overflow-x: hidden;
	}

	.view {
		margin-left: 4rpx;
	}

	.section {
		padding: 32rpx;
		background-color: #ffffff26;
		border-radius: 40rpx;
		width: 638rpx;
	}

	.text_2 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: Mukta;
		line-height: 29.72rpx;
	}

	.image_4 {
		width: 30rpx;
		height: 30rpx;
	}

	.image_5 {
		width: 178rpx;
		height: 248rpx;
		display: inline-block;
	}

	.section_2 {
		margin-bottom: 10rpx;
		padding: 20rpx 0 84rpx;
		background-color: #ffffffcc;
		border-radius: 32rpx;
		width: 178rpx;
		height: 238rpx;
		display: inline-block;
	}

	.section_5 {
		background-color: #d7e4ff;
		border-radius: 30rpx;
		width: 140rpx;
		height: 134rpx;
	}

	.image_6 {
		width: 108rpx;
		height: 186rpx;
	}

	.pos_2 {
		position: absolute;
		left: 50%;
		bottom: 18rpx;
		transform: translateX(-50%);
	}

	.tag-box {
		margin-bottom: 10rpx;
		padding: 16rpx 18rpx 32rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 32rpx;
		width: 178rpx;
		height: 238rpx;
		display: inline-block;
	}

	.tag-box:last-child {
		margin-right: 30rpx;
	}

	.tag-box.active {
		background-color: rgba(255, 255, 255, 1);
	}

	.image-wrapper_2 {
		padding: 20rpx 0 14rpx;
		background-color: #d7e4ff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
	}

	.image_7 {
		width: 102rpx;
		height: 100rpx;
	}

	.font {
		font-size: 32rpx;
		font-family: Lantinghei SC;
		line-height: 30.12rpx;
		color: #000000;
	}

	.text_3 {
		margin-left: 8rpx;
		color: #16162e;
		line-height: 30.26rpx;
	}

	.tag-box-active {
		margin-bottom: 6rpx;
		padding: 16rpx 0 36rpx 16rpx;
		background-color: #d7e4ff99;
		border-radius: 40rpx 0 0 40rpx;
		box-shadow: 0rpx 14rpx 12rpx #f67b7b4d inset;
		width: 154rpx;
		height: 242rpx;
		display: inline-block;
	}

	.image-wrapper_3 {
		padding: 22rpx 0;
		background-color: #fdf2ec99;
		border-radius: 30rpx 0 0 30rpx;
	}

	.image_8 {
		width: 82rpx;
		height: 90rpx;
	}

	.text_4 {
		margin-left: 8rpx;
		line-height: 30rpx;
	}

	.list-box {
		width: 33.92rpx;
	}

	.font_2 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 34rpx;
		color: #000000;
	}



	.font_4 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 34rpx;
		font-weight: 600;
		color: #000000;
	}

	.tag_active .font_2 {
		font-size: 32rpx;
		font-weight: bold;
	}

	.line-box {
		margin-left: 12rpx;
		margin-top: 298rpx;
		background-color: #000000;
		width: 4rpx;
		height: 98rpx;
	}

	.line-box2 {
		margin-top: 110rpx;
	}

	.top-goods {
		margin-left: 32rpx;
		padding: 42rpx 0 58rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		width: 682rpx;
		height: 504rpx;
	}

	.horiz-list {
		margin-left: 12rpx;
	}

	.top-goods-boxs {
		overflow-x: auto;
	}

	.top-goods-box {
		position: relative;
		flex-shrink: 0;
		display: inline-block;
	}

	.horiz-list-item {
		padding: 112rpx 0 8rpx;
		width: 222rpx;
	}

	.horiz-list-item:last-child {
		margin-right: 30rpx;
	}

	.top-goods-box-name {
		padding: 108rpx 32rpx 44rpx;
		background-color: #d7e4ff;
		border-radius: 32rpx;
		width: 222rpx;
	}

	.font_3 {

		font-size: 28rpx;
		font-family: Lantinghei SC;
		line-height: 33rpx;
		color: #000000;
	}

	.text_9 {
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		/* 显示的行数，可自行修改 */
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.font_5 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 20.46rpx;
		color: #000000;
	}

	.image_9 {
		width: 180rpx;
		height: 192rpx;
	}

	.pos_3 {
		position: absolute;
		right: 16rpx;
		top: 12rpx;
	}

	.text_10 {
		text-align: center;
	}

	.image_10 {
		width: 170rpx;
		height: 186rpx;
	}

	.pos_4 {
		position: absolute;
		left: 50%;
		top: 10rpx;
		transform: translateX(-50%);
	}

	.group_5 {
		padding: 112rpx 0 8rpx;
		width: 198.28rpx;
	}

	.text-wrapper_2 {
		padding: 112rpx 0 32rpx;
		background-color: #d7e4ff;
		border-radius: 32rpx 0 0 32rpx;
		width: 198rpx;
	}

	.text_11 {
		text-align: center;
		width: 156rpx;
	}

	.image_11 {
		width: 124rpx;
		height: 152rpx;
	}

	.pos_5 {
		position: absolute;
		right: 24.28rpx;
		top: 48rpx;
	}

	.recommend {
		padding-top: 80rpx;
		background-color: #ffffff;
		border-radius: 60rpx 60rpx 0 0;
	}

	.recommend-box {
		padding-left: 56rpx;
		padding-right: 40rpx;
	}

	.font_6 {
		font-size: 36rpx;
		font-family: Laila;
		line-height: 34rpx;
		font-weight: 700;
		color: #3a7beb;
	}

	.text_16 {
		line-height: 33.94rpx;
	}

	.font_7 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 26.46rpx;
		font-weight: 700;
		color: #979797;
	}

	.image_12 {
		border-radius: 40rpx;
		width: 398rpx;
		height: 490rpx;
	}

	.font_9 {
		font-size: 28rpx;
		font-family: Lantinghei SC;

		line-height: 33rpx;
		color: #000000;
	}

	.recommend-box-top {
		margin-right: 16rpx;
		margin-top: 6rpx;
		width: 200rpx;
	}

	.image_13 {
		border-radius: 30rpx;
		width: 218rpx;
		height: 180rpx;
	}

	.font_8 {
		font-size: 28rpx;
		font-family: Lantinghei SC;
		line-height: 42rpx;
		color: #000000;
	}

	.text_17 {
		margin-top: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.text_18 {
		margin-top: -8rpx;
	}

	.image_14 {
		margin-top: 20rpx;
	}

	.text_19 {
		margin-top: 24rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.text_20 {
		margin-top: -8rpx;
	}

	.recommend-box-footer {
		margin-top: 56rpx;
	}

	.text_21 {
		line-height: 33.94rpx;
	}

	.goods-list {
		/* margin-right: 16rpx; */
		margin-top: 44rpx;
		flex-wrap: wrap;
	}

	.goods-list-box {
		flex: 1 1 304rpx;
	}

	.goods-list-item {
		padding: 16rpx 16rpx 40rpx;
		background-color: #f7f8fc;
		border-radius: 32rpx;


		height: 490rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.goods-list-item:nth-child(2n) {
		margin-right: 0;
	}

	.image_15 {
		border-radius: 32rpx;
		width: 264rpx;
		height: 264rpx;
	}

	.text_22 {
		margin-left: 12rpx;
		margin-top: 24rpx;
	}

	.text_23 {
		width: 262rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		white-space: normal;
	}

	.font_10 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 26.46rpx;
		color: #9c9db9;
	}

	.text_25 {
		margin-left: 16rpx;
		margin-top: 8rpx;
		line-height: 25.98rpx;
	}

	.group_10 {
		padding: 0 8rpx;
    justify-content: space-between;
	}

	.image_18 {
		width: 26rpx;
		height: 22rpx;
	}

	.image_19 {
		margin-left: 36rpx;
	}

	.image_16 {
		width: 52rpx;
		height: 52rpx;
	}

	.image_17 {
		margin-left: 22rpx;
	}

	.text_24 {
		width: 200rpx;
	}

	.footer-goods {
		margin-top: 72rpx;
	}

	.text_26 {
		line-height: 33.94rpx;
	}

	.footer-goods-boxs {
		margin-right: 16rpx;
		margin-top: 44rpx;
		height: auto;
	}

	.section_11 {
		padding: 16rpx 18rpx;
		background-color: #f7f8fc;
		border-radius: 40rpx;
	}

	.image_20 {
		border-radius: 30rpx;
		width: 134rpx;
		height: 134rpx;
	}

	.text_27 {
		margin-top: 28rpx;
		line-height: 30.38rpx;
	}

	.font_11 {
		font-size: 28rpx;
		font-family: Lantinghei SC;
		color: #9c9db9;
	}

	.text_28 {
		margin-right: 72rpx;
		margin-top: -84rpx;
		line-height: 48rpx;
		width: 378rpx;
	}

	.group_13 {
		margin-top: 16rpx;
	}

	.text_29 {
		line-height: 26.46rpx;
	}

	.single-line {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 430rpx;
	}

	.scroll-view-top {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-goods {
		white-space: nowrap;
		width: 600rpx;
	}

	/* 
::v-deep .u-search__content {
  background: rgba(255, 255, 255, 0.3) !important;
}

::v-deep .u-search__content__input {
  background: none !important;
  color: #fff !important;
}

::v-deep .u-search__content__input::placeholder {
  color: #fff !important;
}

::v-deep .u-search__content__icon .u-icon__icon {
  font-size: 50rpx !important;
  color: #fff !important;
} */

	.top_fixd {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 0 10rpx 50rpx;
		background: #42a3f4;
		z-index: 99;
	}

	.mt-top {
		margin-top: 100rpx;
	}

	.tag-list {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 20px 0 0;
	}
	.tag-list-box{
		width: auto;
		display: flex;
		justify-content: space-around;
	}
	.tag-list-box .active{
		color:#2979ff
	}
</style>